﻿@using Authority.DataTransmitModel.User
@using Authority.HttpManage
@using Materal.Model
@using Materal.Common

@inherits LayoutComponentBase

@inject NavigationManager _navigationManager
@inject MessageManage _messageManage
@inject ExceptionManage _exceptionManage
@inject IUserManage _userManage

<style>
    .layout_header {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 40px;
        background-color: #108ee9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: white;
        padding: 0 20px;
        z-index: 2;
        box-shadow: 0 5px 6px #727272;
    }

        .layout_header .layout_header_left_panel {
            display: flex;
        }

            .layout_header .layout_header_left_panel .layout_header_log {
                display: flex;
                align-items: center;
                line-height: 40px;
            }

                .layout_header .layout_header_left_panel .layout_header_log .layout_header_log_image {
                    height: 30px;
                    width: 30px;
                    border-radius: 50%;
                    margin-right: 10px;
                }

                .layout_header .layout_header_left_panel .layout_header_log .layout_header_log_title {
                    text-decoration: none;
                    color: white;
                }

            .layout_header .layout_header_left_panel .layout_header_nav {
                line-height: 40px;
            }

        .layout_header .layout_header_right_panel {
            display: flex;
        }

            .layout_header .layout_header_right_panel .layout_header_user_info {
                line-height: 40px;
                text-align: center;
                position: relative;
                cursor: pointer;
            }

                .layout_header .layout_header_right_panel .layout_header_user_info a {
                    color: white;
                    text-decoration: none;
                }

                .layout_header .layout_header_right_panel .layout_header_user_info > ul {
                    display: none;
                    position: absolute;
                    top: 40px;
                    left: 50%;
                    width: 100px;
                    text-align: center;
                    margin: 0;
                    padding: 0;
                    color: white;
                    transform: translate(-50%, 0);
                    background-color: #108ee9;
                    border-bottom-left-radius: 4px;
                    border-bottom-right-radius: 4px;
                }

                    .layout_header .layout_header_right_panel .layout_header_user_info > ul > li:hover {
                        background-color: rgba(255, 255, 255, 0.2);
                    }

                .layout_header .layout_header_right_panel .layout_header_user_info:hover > ul {
                    display: block;
                    box-shadow: 5px 5px 6px #727272;
                }

            .layout_header .layout_header_right_panel .layout_header_links {
                line-height: 40px;
                margin-left: 20px;
            }

                .layout_header .layout_header_right_panel .layout_header_links > a {
                    text-decoration: none;
                    color: white;
                    font-size: 20px;
                }

    .layout_body {
        position: fixed;
        left: 0;
        right: 0;
        top: 40px;
        bottom: 40px;
        overflow-x: auto;
        padding: 20px 20px 0;
        width: 100%;
        box-sizing: border-box;
    }

    .layout_footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
    }
</style>

<section class="layout_header">
    <div class="layout_header_left_panel">
        <div class="layout_header_log">
            <img class="layout_header_log_image" src="/assets/Logo.jpg" alt="Materal.APP" />
            <NavLink class="layout_header_log_title" href="/" Match="NavLinkMatch.All">Materal.APP</NavLink>
        </div>
        <nav class="m_nav_panel layout_header_nav">
            <MNav>
                <MNavItem Title="发布中心">
                    <MNavItem Href="/Deploy/ApplicationInfoList" Title="应用程序管理"></MNavItem>
                    <MNavItem Href="/Deploy/UploadPackage" Title="上传程序包"></MNavItem>
                    <MNavItem Href="/Deploy/DefaultDataList" Title="默认数据管理"></MNavItem>
                </MNavItem>
                <MNavItem Title="配置中心">
                    <MNavItem Href="/ConfigCenter/ConfigurationItemList" Title="配置项管理"></MNavItem>
                    <MNavItem Href="/ConfigCenter/NamespaceList" Title="命名空间管理"></MNavItem>
                    <MNavItem Href="/ConfigCenter/ProjectList" Title="项目管理"></MNavItem>
                </MNavItem>
                <MNavItem Href="/Authority/UserList" Title="用户管理"></MNavItem>
            </MNav>
        </nav>
    </div>
    <div class="layout_header_right_panel">
        <div class="layout_header_user_info">
            <span>@LoginUserInfo.Name</span>
            <ul>
                <li @onclick="@OnBtnPersonalCenterClick">个人中心</li>
                <li @onclick="@OnBtnChangePasswordClick">修改密码</li>
                <li @onclick="@OnBtnLogoutClick">安全退出</li>
            </ul>
        </div>
        <div class="layout_header_links">
            <a class="Micon Micon_github" href="//github.com/MateralCMX/Materal/tree/master/Materal.APP" target="_blank"></a>
        </div>
    </div>
</section>
@Body
<section class="layout_footer m_footer">
    copyright © 2020 Materal
</section>
<MModal Title="修改密码" @bind-Display="ChangePasswordModalDisplay">
    <ChangePassword ChangeSuccess="@SwitchChangePasswordModal" Cancel="@SwitchChangePasswordModal"></ChangePassword>
</MModal>
<MModal Title="个人中心" @bind-Display="PersonalCenterModalDisplay">
    <OperationUser UserID="LoginUserInfo.ID" Success="@OnEditMyInfoSuccess" Cancel="@ClosePersonalCenterModal"></OperationUser>
</MModal>

@code{
    #region 属性字段
    /// <summary>
    /// 用户信息
    /// </summary>
    public UserDTO LoginUserInfo { get; set; } = new UserDTO
    {
        Name = "正在加载...."
    };
    /// <summary>
    /// 更改密码模态窗是否显示
    /// </summary>
    public bool ChangePasswordModalDisplay { get; set; }
    /// <summary>
    /// 个人中心模态窗是否显示
    /// </summary>
    public bool PersonalCenterModalDisplay { get; set; }
    #endregion
    #region 生命周期
    /// <summary>
    /// 组件呈现之后
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        await SearchLoginUserInfoAsync();
        await base.OnAfterRenderAsync(true);
        StateHasChanged();
    }
    #endregion
    #region 事件
    /// <summary>
    /// 单击退出登录
    /// </summary>
    /// <param name="eventArgs"></param>
    /// <returns></returns>
    public void OnBtnLogoutClick(MouseEventArgs eventArgs)
    {
        _navigationManager.NavigateTo("/Login");
    }
    /// <summary>
    /// 单击打开修改密码模态窗按钮
    /// </summary>
    /// <param name="eventArgs"></param>
    public void OnBtnChangePasswordClick(MouseEventArgs eventArgs)
    {
        SwitchChangePasswordModal();
    }
    /// <summary>
    /// 单击打开修改密码模态窗按钮
    /// </summary>
    /// <param name="eventArgs"></param>
    public void OnBtnPersonalCenterClick(MouseEventArgs eventArgs)
    {
        OpenPersonalCenterModal();
    }
    /// <summary>
    /// 修改我的信息成功
    /// </summary>
    public async Task OnEditMyInfoSuccess()
    {
        await SearchLoginUserInfoAsync();
        ClosePersonalCenterModal();
    }
    #endregion
    #region 私有方法
    /// <summary>
    /// 查询登录用户信息
    /// </summary>
    /// <returns></returns>
    private async Task SearchLoginUserInfoAsync()
    {
        try
        {
            ResultModel<UserDTO> resultModel = await _userManage.GetMyUserInfoAsync();
            if (resultModel.ResultType == ResultTypeEnum.Success)
            {
                LoginUserInfo = resultModel.Data;
            }
            else
            {
                await _messageManage.WarningAsync(resultModel.Message);
            }
        }
        catch (Exception exception)
        {
            await _exceptionManage.HandlerExceptionAsync(exception);
        }
    }
    /// <summary>
    /// 切换修改密码模态框
    /// </summary>
    private void SwitchChangePasswordModal()
    {
        ChangePasswordModalDisplay = !ChangePasswordModalDisplay;
    }
    /// <summary>
    /// 打开个人中心模态框
    /// </summary>
    public void OpenPersonalCenterModal()
    {
        PersonalCenterModalDisplay = true;
    }
    /// <summary>
    /// 关闭个人中心模态框
    /// </summary>
    public void ClosePersonalCenterModal()
    {
        PersonalCenterModalDisplay = false;
    }
    #endregion
}